import React from 'react';
import { Modal } from 'antd';
import { bgColor } from '../../utils';
import { render, unmountComponentAtNode } from 'react-dom';

export default function showDicesSelector(dices: any[]) {
  return new Promise((resolve, reject) => {
    const wrap = document.createElement('div');
    document.body.appendChild(wrap);
    const unmountCom = () => {
      unmountComponentAtNode(wrap);
      document.body.removeChild(wrap);
    };
    render(
      <Modal
        title="选择用哪个骰子"
        visible
        footer={null}
        onCancel={() => {
          reject();
          unmountCom();
        }}
      >
        {dices.map(d => {
          return (
            <div
              key={d.type}
              onClick={() => {
                resolve(d);
                unmountCom();
              }}
              className={`dice-item ${d.type}-dice`}
              style={{ background: bgColor[d.type] }}
            >
              {' '}
              {d.value}
            </div>
          );
        })}
      </Modal>,
      wrap,
    );
  });
}
